<template>
    <div class="list-content bg-fff">
        <AdminList title="管理员" :adminList="adminList" />
        <TableForm :initial-form="form" @query="getList" @reset="reset" :total="total" @current-change="currentChange"
            @size-change="sizeChange" ref="tableFormRef">
            <template #form-items>
                <el-form-item>
                    <el-input v-trim placeholder="请输入姓名" clearable v-model="form.UserName"
                        style="width: 190px"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.Status" placeholder="请输选择" style="width: 190px">
                        <el-option v-for="item in statusList" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
            </template>

            <!-- 下方表格区域 -->
            <template #table>
                <CommonTable :table-data="list" :max-height="580">
                    <el-table-column prop="uid" label="用户ID" min-width="180" show-overflow-tooltip fixed />
                    <el-table-column prop="title" label="姓名" min-width="180" show-overflow-tooltip>
                        <template #="{ row }">
                            <span>{{ row.lastName }}{{ row.firstName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="email" label="邮箱" min-width="180" show-overflow-tooltip />
                    <el-table-column prop="phoneNo" label="手机号" min-width="180" show-overflow-tooltip />
                    <el-table-column prop="creationDate" label="注册时间" min-width="200" show-overflow-tooltip>
                        <template #="{ row }">
                            <span>{{ getDateTime(Date.parse(row.creationDate).toString())[11] }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="title" label="状态" width="180">
                        <template #="{ row }">
                            <span v-if="row.status == 1" class="df ai-c">
                                <i class="tag bg-green f-mr-05"></i>
                                <span>正常</span>
                            </span>
                            <span v-if="row.status == 2" class="df ai-c">
                                <i class="tag bg-red f-mr-05"></i>
                                <span>禁用</span>
                            </span>
                            <span v-if="row.status == 4" class="df ai-c">
                                <i class="tag bg-c8 f-mr-05"></i>
                                <span>已注销</span>
                            </span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="title" label="操作" width="160" fixed="right"
                        v-if="hasPermissionOrRole('UserManagement.List', 1, 1)">
                        <template #="{ row }">
                            <div v-if="row.status == 1">
                                <span class="f-mr-10 blue pointer"
                                    v-if="hasPermissionOrRole('UserManagement.Detail', 1, 1)"
                                    @click="opration(row, 'look')">
                                    查看
                                </span>
                                <span class="red pointer" v-if="hasPermissionOrRole('UserManagement.Ban', 1, 1)"
                                    @click="opration(row, 'disable')">
                                    禁用
                                </span>
                            </div>

                            <div v-if="row.status == 2">
                                <span class="f-mr-10 blue pointer"
                                    v-if="hasPermissionOrRole('UserManagement.Detail', 1, 1)"
                                    @click="opration(row, 'look')">
                                    查看
                                </span>
                                <span class="blue pointer" v-if="hasPermissionOrRole('UserManagement.Ban', 1, 1)"
                                    @click="opration(row, 'start')">
                                    启用
                                </span>
                            </div>

                            <div v-if="row.status == 4">
                                <span class="f-mr-10 blue pointer"
                                    v-if="hasPermissionOrRole('UserManagement.Detail', 1, 1)"
                                    @click="opration(row, 'look')">
                                    查看
                                </span>
                            </div>
                        </template>
                    </el-table-column>
                </CommonTable>
            </template>
        </TableForm>
    </div>
</template>
<script setup lang="ts">
import { AdminEnum } from '@/enum/admin';
import AdminList from '@/components/AdminList.vue';
import TableForm from '@/components/TableForm/index.vue';
import CommonTable from '@/components/CommonTable/index.vue';
import { getAdminList } from '@/apis/admin';
import disable from '@/assets/imgs/disable.svg';
import { ElMessage, ElMessageBox } from 'element-plus';
import { reactive, ref, onMounted, h } from 'vue';
import api from '@/apis/user';
import usePermissionHasAccess from '@/hooks/permissionHasAccess';
import { useRouter } from 'vue-router';
import { errorTips, getDateTime, successTips } from '@/utils/utils';
const $router = useRouter();

// //#region
const statusList = [
    {
        value: 0,
        label: '全部状态',
    },
    {
        value: 1,
        label: '正常',
    },
    {
        value: 2,
        label: '禁用',
    },
    // {
    //     value: 3,
    //     label: '删除',
    // },
    {
        value: 4,
        label: '注销',
    },
];
// //#endregion
const { hasPermissionOrRole } = usePermissionHasAccess();

const form = ref({
    Status: 0,
    UserName: '',
    PageIndex: 1,
    PageSize: 50,
    SortField: '',
    SortOrder: '',
});

const tableFormRef = ref<any>(null);
const total = ref(0);
const list = ref([]);

onMounted(() => {
    getList();
    getAdmin();
});

// list列表
const getList = () => {
    api.getUserlist(form.value).then(res => {
        if (!res || res.code != 1) return;

        const { data, count: num } = res.data;
        tableFormRef.value && tableFormRef.value.updateTotal(num);
        list.value = data;
        total.value = num;
    });
};

// 重置
const reset = () => {
    form.value.UserName = '';
    form.value.Status = 0;
    form.value.PageIndex = 1;
    form.value.PageSize = 50;
    getList();
};

//获取国家页面的管理员数据
const adminList = ref([]);

const getAdmin = async () => {
    const res = await getAdminList({ menuId: AdminEnum.COUNTRY_MANAGEMENT });
    if (!res || res.code != 1) {
        adminList.value = [];
        return;
    }
    adminList.value = res.data;
};

const currentChange = (val: number) => {
    form.value.PageIndex = val;
    getList();
};

const sizeChange = (val: number) => {
    form.value.PageSize = val;
    getList();
};


// 操作
const opration = (row: any, name: string) => {
    switch (name) {
        case 'look':
            $router.push({
                path: '/user-detail',
                query: {
                    queryRow: JSON.stringify(row),
                },
            });
            break;
        case 'start':
            ElMessageBox.confirm('启用后，该手机号和邮箱可以正常使用客户端。是否确认启用？', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                dangerouslyUseHTMLString: true,
                customClass: 'my-ElMessageBox',
                icon: h('img', {
                    src: disable,
                }),
            })
                .then(() => {
                    api.setstatus({ userId: row.userId, isActive: true }).then(res => {
                        if (!res || res.code != 1) return;
                        getList();
                    });
                })
                .catch(() => { });

            break;
        case 'disable':
            ElMessageBox.confirm('禁用后，该手机号和邮箱无法登陆客户端。是否确认禁用？', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                dangerouslyUseHTMLString: true,
                customClass: 'my-ElMessageBox',
                icon: h('img', {
                    src: disable,
                }),
            })
                .then(() => {
                    api.setstatus({ userId: row.userId, isActive: false }).then(res => {
                        if (!res || res.code != 1) return;
                        getList();
                    });
                })
                .catch(() => { });

            break;

        default:
            break;
    }
};

</script>

<style scoped lang="scss">
.list-content {
    position: relative;
    border-radius: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 15px 20px;
}
</style>
